<script setup lang="ts">
import type { ComponentPublicInstance } from 'vue'
import SongList from '@/components/music-list/song-list.vue'
import BackgroundWall from '@/components/music-list/background-wall.vue'
import useInitScrollHeight from '@/common/use-init-scroll-height'
import MiniPlayer from '@/components/mini-player/index.vue'
const emits = defineEmits<{
  (event: 'update:show-music-list-com', visible: boolean): void
  (event: 'update:show-play-list', visible: boolean): void
}>()
interface IProps {
  songList: ISongItem[]
  title: string
  pic: string
  loading?: boolean
  showMusicListCom?: boolean
  showPlayList?: boolean
  sliderValue?: number
  loadingText?: string
  more?: boolean
  pullDownRefresh?: boolean
  pullUpLoad?: boolean
  request?: (arg?: any) => any
  refreshRequest?: () => any
}

const props = withDefaults(defineProps<IProps>(), {
  songList: () => [],
  title: '',
  pic: '',
  loading: false,
  showMusicListCom: undefined,
  showPlayList: false,
  sliderValue: 0,
  loadingText: '',
  more: false,
  request: () => {},
  refreshRequest: () => {}
})
const titleHeight = 30
const backgroundWallHeight = 262
const scrollY = ref<number>(0)
function scroll(pos: { x: number; y: number }) {
  scrollY.value = -pos.y
}
type backgroundWallStyleTy = {
  zIndex: number
  height: number
  transform: string
}
const backgroundWallStyle = ref<backgroundWallStyleTy>({
  zIndex: 0,
  height: backgroundWallHeight,
  transform: `scale(1) translateZ(0px)`
})
type filterStyleTy = {
  backdropFilter: string
}
const filterStyle = ref<filterStyleTy>({
  backdropFilter: `blur(0px)`
})
watch(scrollY, (newVal) => {
  const backgroundWallStyleValue = backgroundWallStyle.value
  if (newVal > 0) {
    let blur = Math.max(Math.min(titleHeight, (newVal / backgroundWallHeight) * titleHeight), 0)
    filterStyle.value.backdropFilter = `blur(${blur}px)`
    if (backgroundWallHeight - newVal <= titleHeight) {
      backgroundWallStyleValue.zIndex = 10
      backgroundWallStyleValue.transform = `translateZ(${backgroundWallStyleValue.zIndex}px)`
      backgroundWallStyleValue.height = titleHeight
    } else {
      backgroundWallStyleValue.zIndex = 0
      backgroundWallStyleValue.transform = `translateZ(0px)`
      backgroundWallStyleValue.height = backgroundWallHeight
    }
  } else {
    let scale = 1 + Math.abs(newVal / backgroundWallHeight)
    backgroundWallStyleValue.transform = `scale(${scale}) translateZ(0px)`
  }
})
const backgroundWallRef = ref<ComponentPublicInstance | null>(null)
const { scrollHeight } = useInitScrollHeight([backgroundWallRef])
</script>

<template>
  <div class="music-list">
    <background-wall
      ref="backgroundWallRef"
      :show-music-list-com="props.showMusicListCom"
      :background-wall-style="backgroundWallStyle"
      :filter-style="filterStyle"
      :title="props.title"
      :pic="props.pic"
      @update:show-music-list-com="emits('update:show-music-list-com', $event)"
    />
    <song-list
      :song-list="props.songList"
      :loading="loading"
      :height="scrollHeight"
      :loading-text="props.loadingText"
      :more="props.more"
      :pull-down-refresh="props.pullDownRefresh"
      :pull-up-load="props.pullUpLoad"
      :request="props.request"
      :refresh-request="props.refreshRequest"
      @scroll="scroll"
    />
  </div>
</template>

<style scoped lang="scss">
.music-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
